<template>
	<view class="history-container">
		<u-tabs :list="tabList" @change="handleTabChange"></u-tabs>

		<view class="history-list">
			<view class="history-item" v-for="(item, index) in historyList" :key="index">
				<view class="item-header">
					<text class="date">{{item.date}}</text>
					<text class="status" :class="item.status">{{item.statusText}}</text>
				</view>
				<view class="item-content">
					<view class="info-row">
						<text class="label">用水量</text>
						<text class="value">{{item.usage}}吨</text>
					</view>
					<view class="info-row">
						<text class="label">取水地点</text>
						<text class="value">{{item.location}}</text>
					</view>
					<view class="info-row">
						<text class="label">费用</text>
						<text class="value">¥{{item.amount}}</text>
					</view>
				</view>
			</view>
		</view>

		<u-empty v-if="historyList.length === 0" text="暂无记录"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: [
				{ name: '全部' },
				{ name: '本月' },
				{ name: '上月' }
			],
			historyList: [
				{
					date: '2025-02-19 15:30',
					status: 'success',
					statusText: '已完成',
					usage: '2.5',
					location: '南山区科技园南区取水点',
					amount: '12.50'
				},
				{
					date: '2025-02-18 09:15',
					status: 'success',
					statusText: '已完成',
					usage: '3.0',
					location: '南山区科技园南区取水点',
					amount: '15.00'
				}
			]
		}
	},
	methods: {
		handleTabChange(index) {
			// TODO: 根据选中的标签页筛选数据
			console.log('切换到标签页：', index)
		}
	}
}
</script>

<style lang="scss" scoped>
.history-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 30rpx;

	.history-list {
		padding: 20rpx;

		.history-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.item-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;

				.date {
					color: #666;
					font-size: 28rpx;
				}

				.status {
					font-size: 28rpx;

					&.success {
						color: #19be6b;
					}

					&.pending {
						color: #ff9900;
					}

					&.failed {
						color: #fa3534;
					}
				}
			}

			.item-content {
				.info-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						color: #666;
						font-size: 28rpx;
					}

					.value {
						color: #333;
						font-size: 28rpx;
					}
				}
			}
		}
	}
}
</style>
